<!-- 
办理业务
-->
<template >
  <div class="wx-content">
    <div class="wx-login">
      <div class="wx-login_shadow">
        <!-- 输入区 -->
        <van-cell-group>
          <div class="text1">身份证号码</div>
          <van-field
            v-model="idcard"
            label=""
            ref="idcardInput"
            placeholder="请输入身份证"
          />

          <div class="text1">手机号码</div>
          <van-field
            v-model="phone"
            label=""
            ref="phoneInput"
            placeholder="请输入手机号码"
          />
          <div class="text1">验证码</div>
          <van-field
            v-model="code"
            center
            clearable
            ref="codeInput"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                size="small"
                :disabled="time ? true : false"
                plain
                color="#3D84FF"
                type="primary"
                @click="handleGetcode"
              >
                <span v-if="!time" class="timeButton">验证码</span>
                <span v-else>
                  <van-count-down :time="time" format="ss" @finish="checkTime">
                    <template #default="timeData">
                      <span class="time">重新获取({{ timeData.seconds }})</span>
                    </template>
                  </van-count-down>
                </span>
              </van-button>
            </template>
          </van-field>
        </van-cell-group>

        <!-- end 输入区 -->
      </div>
    </div>
    <div class="buttonWrap">
      <div class="flex-column flex-center" style="padding: 10px 16px">
        <div class="text1" style="color: red; padding: 0;">
          提示:登记号码必须与实际业务办理相匹配
        </div>
        <div class="text1" style="color: red; padding: 0;">
          推荐方才能获得相应积分
        </div>
      </div>
      <van-button class="van-button_login" @click="doBook_book">
        登记</van-button
      >
    </div>
  </div>
</template>
<script>
import utils from "@/assets/js/utils";
import qs from "qs";
import Vue from "vue";

export default {
  data() {
    return {
      idcard: "",
      phone: "",
      code: "",
      time: 0,
      role: "member", //控制商家或用户登录的变量
      wxUserInfo: {}, //微信用户信息
      hasAgree: false,
      dataList: {},
      show: false,
      agreement: "",
      userinfo: "",
    };
  },
  mounted() {
    this.getBookModel_book();
  },
  methods: {
    getBookModel_book() {
      var params = {
        pkey: this.$route.query.pkey,
      };
      this.$myApi.getBookModel_book(params).then((res) => {
        if (res.code == 0) {
          this.dataList = res.result;
        } else {
        }
      });
    },

    /**
     * 验证码倒计时结束事件
     */
    checkTime(e) {
      this.time = 0;
    },
    /**
     * 切换登录
     */
    handleLoginChange(val) {
      (this.phone = ""), (this.idcard = ""), (this.code = "");
      this.role == val;
    },

    /**
     * 预约办理银行业务(用户未绑定)
     */
    doBook_book() {
      if (!this.checkLoginFrom(!0)) {
        return;
      }
      let params,
        wxUserInfo = this.wxUserInfo;
      localStorage.setItem("role", this.role);
      // console.log(wxUserInfo)
      params = {
        bookModelPkey: this.$route.query.pkey,
        referrer: this.$route.query.sharePkey,
        phone: this.phone,
        code: this.code,
        idcard: this.idcard,
        // openid: this.$store.state.openid,
      };

      this.$myApi.doBook_book(params).then((res) => {
        if (res.code == 0) {
          this.$notify({ type: "success", message: "操作成功" });
          if (this.dataList.url) {
            window.location.href = this.dataList.url;
          } else {
            this.$router.push("/home");
          }
        }
      });
    },

    /**
     * 发送验证码
     */
    handleGetcode() {
      if (!this.checkLoginFrom(!1)) {
        return;
      }
      let params = {
        phone: this.phone,
        flag: true,
      };
      if (this.role == "member") {
        params = {
          idcard: this.idcard,
          phone: this.phone,
          flag: true,
        };
        this.$myApi.captcha_book(params).then((res) => {
          if (res.code == 0) {
            this.time = 60000;
            this.$toast("获取成功，请查收");
          }
        });
      } else if (this.role == "merchant") {
        params = {
          phone: this.phone,
        };
        axios
          .post(api.login.merchantCaptcha, qs.stringify(params))
          .then((res) => {
            this.time = 60000;
            this.$toast("获取成功，请查收");
          });
      }
    },
    /**
     * 检查表单
     */
    checkLoginFrom(type) {
      let result = !0;
      if (!this.idcard) {
        this.$toast("请先填写身份证号");
        this.$refs.idcardInput.focus();
        return (result = !1);
      }
      if (!this.phone) {
        this.$toast("请先填写手机号");
        this.$refs.phoneInput.focus();
        return (result = !1);
      }
      // else if (!utils.checkMobile(this.phone)) {
      //   this.$toast('请填写正确的手机号');
      //   this.$refs.phoneInput.focus()
      //   return result = !1
      // }
      if (!type) return result;
      if (!this.code) {
        this.$toast("请填写验证码");
        this.$refs.codeInput.focus();
        return (result = !1);
      }
      return (result = !0);
    },
  },
};
</script>
<style lang="less" scoped>
@MainColor: #af8f75;
@DeepGray: #999;
@LightGray: #a7a7a7;
@White: #fff;
@Money: #a71d27;
@Red: #f22005;
@Background: #f8f8f8;
@Black: #333;
@BorderColor: #f5f5f5;
.wx-content {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #fff url("../../assets/images/ywbl.png") top center no-repeat;
  background-size: 100% 100%;
  .buttonWrap {
    width: 100%;
    background: #fff;
    z-index: 999;
    position: absolute;
    bottom: 0;
    .van-button_login {
      display: block;
      width: 6.54rem;
      height: 0.92rem;
      margin: 0rem auto 0.5rem auto;
      border-radius: 20px;
      font-size: 0.32rem;
      font-weight: bold;
      color: #fff;
      background: #3d84ff;
    }
  }
  .wx-login {
    position: relative;
    margin: auto;
    width: 100%;
    .wx-login_shadow {
      position: relative;
      z-index: 100;
      padding: 0.3rem;
      width: 90%;
      margin: 0 auto;
      background: #fff;
      border-radius: 10px;
      .text1 {
        font-size: 0.3rem;
        color: #333333;
        padding: 10px 16px;
      }
      .time {
        color: #3d84ff;
      }
      .timeButton {
        background: #3d84ff;
        border-radius: 10px;
        color: #fff;
        font-size: 0.28rem;
        padding: 0.15rem 0.28rem;
      }
      .van-field__button {
        .van-button--primary {
          height: 24px;
          border: 0;
        }
      }
    }
  }

  //wx-login
}
</style>
<style lang="less" scoped>
@MainColor: #af8f75;
@DeepGray: #999;
@LightGray: #a7a7a7;
@White: #fff;
@Money: #a71d27;
@Red: #f22005;
@Background: #f8f8f8;
@Black: #333;
@BorderColor: #f5f5f5;
/deep/.van-field__control {
  font-size: 0.4rem;
  // font-weight: bold;
  color: #000000;
}
/deep/.van-hairline--top-bottom::after {
  border-width: 0;
}

/deep/.van-tabs__line {
  background-color: @MainColor;
  height: 2px;
}

/deep/ .van-tab--active {
  color: @MainColor;
}

/deep/.van-cell-group {
  margin-top: 20px;
}
</style>